<template>
  <a-card :body-style="{ height: 'calc(100vh - 125px)' }">
    <a-row class="w-full h-full flex flex-col overflow-x-auto overflow-y-hidden">
      <!-- 查询条件 -->
      <a-row v-if="showSearchRow" class="w-full">
        <a-form :model="searchForm" label-align="left" layout="inline" size="small">
          <a-form-item field="caseName" label="案件名称">
            <a-input v-model="searchForm.caseName" placeholder="案件名称"/>
          </a-form-item>
          <a-form-item field="itemName" label="物品名称">
            <a-input v-model="searchForm.itemName" placeholder="物品名称"/>
          </a-form-item>
          <a-form-item field="inboundTimeRange" label="入库时间">
            <a-range-picker v-model="searchForm.inboundTimeRange" style="width: 240px" />
          </a-form-item>
        </a-form>
        <a-row class="w-full mt-2" justify="center">
          <a-space>
            <a-button type="primary" @click="getPageList(false)">
              <template #icon>
                <icon-search/>
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="getPageList(true)">
              <template #icon>
                <icon-sync/>
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-row>
      </a-row>

      <!-- 分割线 -->
      <a-divider v-if="showSearchRow" class="mt-2"/>

      <!-- 数据操作区 -->
      <a-row class="w-full flex justify-between">
        <a-space>
          <!-- 添加 -->
          <a-button
              size="small"
              type="primary"
              @click="addBtnClick()"
          >
            <template #icon>
              <icon-plus/>
            </template>
            <template #default>添加</template>
          </a-button>
        </a-space>
        <a-space>
          <!-- 刷新 -->
          <a-button shape="circle" size="small" @click="getPageList(false)">
            <template #icon>
              <icon-refresh/>
            </template>
          </a-button>
          <!-- 收缩/展开 -->
          <a-button shape="circle" size="small" @click="showSearchRow = !showSearchRow">
            <template #icon>
              <icon-caret-up v-if="showSearchRow"/>
              <icon-caret-down v-else/>
            </template>
          </a-button>
        </a-space>
      </a-row>

      <!-- 数据展示区 -->
      <a-row class="w-full flex-1 mt-3 overflow-y-auto">
        <a-table
            :columns="datatable.columns"
            :data="datatable.records"
            :loading="datatable.loading"
            :pagination="false"
            :scroll="{ minWidth: 600, y: '100%' }"
            class="w-[100%]"
            table-layout-fixed
        >
          <!-- 案件名称 -->
          <template #caseName="{ record }">
            <a-link icon @click="detailBtnClick(record.id)">{{ record.caseName }}</a-link>
          </template>
          <!-- 操作 -->
          <template #operation="{ record }">
            <a-button
                size="mini"
                type="text"
                @click="updateBtnClick(record.id)"
            >
              <template #icon>
                <icon-edit/>
              </template>
              <template #default>修改</template>
            </a-button>
            <a-popconfirm content="确认要删除吗?" @ok="deleteBtnOkClick(record.id)">
              <a-button
                  size="mini"
                  status="danger"
                  type="text"
              >
                <template #icon>
                  <icon-delete/>
                </template>
                <template #default>删除</template>
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-row>

      <!-- 分页 -->
      <a-row class="w-full flex justify-end mt-2">
        <pagination
            v-if="datatable.total > 0"
            v-model:page-num="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :total="datatable.total"
            @pagination="getPageList(false)"
        />
      </a-row>
    </a-row>

    <!-- 添加/修改 -->
    <a-modal
        v-model:visible="modal.visible"
        :esc-to-close="false"
        :footer="false"
        :mask-closable="false"
        draggable
        width="80%"
    >
      <template #title>{{ modal.title }}</template>
      <component
          :is="modal.component"
          v-if="modal.visible"
          :params="modal.params"
          @cancel="onCancel"
          @ok="onOk"
      />
    </a-modal>
  </a-card>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, shallowRef } from "vue";
import CaseWarehouseForm from "~/pages/market/CaseWarehouseForm.vue";
import CaseWarehouseDetail from "~/pages/market/CaseWarehouseDetail.vue";

// 全局实例
const { proxy } = getCurrentInstance();

// 是否展示搜索区域
const showSearchRow = ref(true);

// 搜索参数表单
const searchForm = reactive({
  // 案件名称
  caseName: null,
  // 物品名称
  itemName: null,
  // 入库时间范围
  inboundTimeRange: [],
  // 页码
  pageNum: 1,
  // 条数
  pageSize: 10,
});

// 数据列表
const datatable = reactive({
  // 列配置
  columns: [
    { title: "案件名称", dataIndex: "caseName", slotName: "caseName", align: "center" },
    { title: "物品名称", dataIndex: "itemName", align: "center" },
    { title: "总数量", dataIndex: "totalQuantity", align: "center" },
    { title: "入库时间", dataIndex: "inboundTime", align: "center" },
    { title: "出库时间", dataIndex: "outboundTime", align: "center" },
    { title: "操作", slotName: "operation", align: "center", width: 160, fixed: "right" },
  ],
  // 数据记录
  records: [],
  // 数据总数
  total: 0,
  // 加载状态
  loading: false,
});

// 模态框
const modal = reactive({
  // 是否可见
  visible: false,
  // 标题
  title: "",
  // 组件
  component: null,
  // 参数
  params: {},
});

// 获取分页数据
const getPageList = (isReset) => {
  // 是否重置查询条件
  if (isReset) {
    searchForm.caseName = null;
    searchForm.itemName = null;
    searchForm.inboundTimeRange = [];
    searchForm.pageNum = 1;
  }
  
  // 模拟数据加载
  datatable.loading = true;
  setTimeout(() => {
    // 模拟数据
    datatable.records = [
      {
        id: 1,
        caseName: "某违法建筑案",
        itemName: "建筑材料",
        totalQuantity: 100,
        inboundTime: "2023-01-01 10:00:00",
        outboundTime: "2023-02-01 14:00:00"
      },
      {
        id: 2,
        caseName: "某非法采矿案",
        itemName: "矿石",
        totalQuantity: 50,
        inboundTime: "2023-03-15 09:30:00",
        outboundTime: ""
      },
      {
        id: 3,
        caseName: "某环境污染案",
        itemName: "化学物品",
        totalQuantity: 30,
        inboundTime: "2023-04-20 11:20:00",
        outboundTime: "2023-05-10 16:45:00"
      }
    ];
    datatable.total = 3;
    datatable.loading = false;
  }, 500);
};

// 添加按钮点击
const addBtnClick = () => {
  modal.visible = true;
  modal.title = "添加涉案物品信息";
  modal.component = shallowRef(CaseWarehouseForm);
  modal.params = {
    operationType: proxy.operationType.add.type,
  };
};

// 详情按钮点击
const detailBtnClick = (id) => {
  modal.visible = true;
  modal.title = "涉案物品详情";
  modal.component = shallowRef(CaseWarehouseDetail);
  modal.params = {
    operationType: proxy.operationType.detail.type,
    id: id,
  };
};

// 修改按钮点击
const updateBtnClick = (id) => {
  modal.visible = true;
  modal.title = "修改涉案物品信息";
  modal.component = shallowRef(CaseWarehouseForm);
  modal.params = {
    operationType: proxy.operationType.update.type,
    id: id,
  };
};

// 删除按钮确认点击
const deleteBtnOkClick = (id) => {
  // 模拟删除操作
  proxy.$msg.success("删除成功");
  getPageList(false);
};

// 取消
const onCancel = () => {
  modal.visible = false;
};

// 确定
const onOk = () => {
  modal.visible = false;
  getPageList(false);
};

// 初始化
getPageList(false);
</script>